/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="header-opr__wrap">
        <div v-for="(item, index) in oprList" :key="index" class="header-opr__item">
            <div class="header-opr__item-wrap" @click="onOprItemClick(item)">
                <icon-bg :icon="item.icon" color="#000"></icon-bg>
                <span class="header-opr__title">{{ item.title }}</span>

                <div style="padding-top: 15px">
                    <div v-if="item.children" class="header-opr__chil-wrap">
                        <p class="header-opr__chil-top-title">{{ item.title }}</p>
                        <div class="header-opr__chil-item-wrap">
                            <div v-for="(itemChil, indexChil) in item.children"
                                 :key="indexChil"
                                 class="header-opr__chil-item"
                                 :title="itemChil.tip"
                                 @click="onChildrenClick(itemChil)">
                                <icon-bg class="header-opr__chil-img" :icon="itemChil.icon" bg="#0C0323"></icon-bg>
                                <p class="header-opr__chil-title">{{ itemChil.title }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.header-opr__wrap {
    text-align: right;
    .header-opr__item {
        display: inline-block;
        margin-right: 30px;
        position: relative;
    }
    .header-opr__item-wrap {
        cursor: pointer;
        &:hover {
            .header-opr__chil-wrap {
                display: block;
            }
        }
    }
    .header-opr__title {
        margin-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #FFF;
    }
    .header-opr__chil-wrap {
        cursor: default;
        position: absolute;
        right: 0;
        background: #FFF;
        padding: 20px;
        color: #000;
        border-radius: 6px;
        z-index: 2;
        display: none;
    }
    .header-opr__chil-item-wrap {
        display: flex;
    }
    .header-opr__chil-item {
        min-width: 70px;
        display: inline-block;
        margin-right: 60px;
        text-align: center;
        cursor: pointer;

        &:last-child {
            margin-right: 0;
        }
    }
    .header-opr__chil-top-title {
        text-align: left;
        font-size: 18px;
        margin-bottom: 15px;
    }
    .header-opr__chil-title {
        font-size: 14px;
        margin-top: 15px;
    }
}
</style>

<script>
    import downloadFileStatic from 'src/util/download_file_static';
    import IconBg from 'src/components/icon_bg';
    export default {

        data () {
            return {
                  oprList: [
                      {
                          id: 'guide',
                          icon: 'iconremind-s',
                          title: '用户引导',
                          showChildren: false,
                          children: [
                              {
                                  icon: 'iconshiyongshouce',
                                  title: '使用手册',
                                  type: 'download',
                                  fileUrl: './static/help/GeniusAI平台使用说明文档V3.3.0.doc'
                              },
                              {
                                  icon: 'iconmobanguanli',
                                  title: '模板示例',
                                  tip: '该功能即将开放'
                              }
                          ]
                      }
                      // {
                      //     id: 'introduction',
                      //     icon: 'iconlaba',
                      //     title: '新版本介绍',
                      //     showChildren: false,
                      // }
                  ]
            };
        },
        components: {
            IconBg
        },

        methods:{

            onOprItemClick (item) {
                item.showChildren = !item.showChildren;
            },

            onChildrenClick (item) {
                if (!item.type) {
                    return;
                }
                if (item.type === 'download') {
                    downloadFileStatic(item.fileUrl)
                }
            }
        }
    };
</script>
